<template>
  <Modal
    title="详情"
    v-model="modelView"
    :mask-closable="false"
    :fullscreen="false"
    :width="90"
    :closable="true"
    @on-visible-change="changeVisible">
    <Card style="margin:0 0 10px 0">
      <p slot="title">
        详情1
      </p>
      <Row style="margin:0 0 10px 0">
        <Col :span="12">
          登录名: {{formData.loginName}}
        </Col>
        <Col :span="12">
          用户名: {{formData.userName}}
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          状态: {{formData.state_str}}
        </Col>
      </Row>
    </Card>
    <Card>
      <p slot="title">
        详情2
      </p>
      <Table height="1000">

      </Table>
    </Card>
    <div slot="footer">
      <Button type="primary" @click="close">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import {getUserStateDesc} from '@/enum/SysEnum'

  export default {
    name: "detail",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      initFormData: {
        id: null,
        loginName: null,
        userName: null,
        state: null
      }
    },
    data() {
      return {
        modelView: false,
        formData: {}
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
      }
    },
    methods: {
      changeVisible() {
        if (this.modelView) {
          this.formData = this.queryDetail()
        } else {
          this.formData = {}
        }
        this.$emit('update:visible', this.modelView)
      },
      queryDetail() {
        return {
          id: this.initFormData.id,
          loginName: this.initFormData.loginName,
          userName: this.initFormData.userName,
          state: this.initFormData.state,
          state_str: getUserStateDesc(this.initFormData.state)
        }
      },
      close() {
        this.modelView = false
      }
    }
  }
</script>

<style scoped>
  .modal {
    height: 100px;
    overflow: auto;
  }
</style>
